<template>
  <!-- 登录头部 -->
  <div class="login-header">
    <!-- 左边 -->
    <div class="login-left" @click="gotoHome">
      <van-icon name="wap-home-o" size="30px" />
    </div>
    <!-- 字体 -->
    <span>网易严选</span>
    <!-- 右边 -->
    <div class="login-right">
      <van-icon name="search" size="30px" @click="gotoSearch" />
      <van-icon name="shopping-cart-o" size="30px" class="margin" @click="gotoShopping" />
    </div>
  </div>
</template>

<script setup lang="ts">
// 导入路由
import { useRouter } from 'vue-router'
// 获取路由实例
const router = useRouter()
// 去主页面
const gotoHome = () => {
  router.push('/home')
}

// 点击搜索框去搜索页面
const gotoSearch = () => {
  router.push('/search')
}

// 去购物车 !!!!!
const gotoShopping = () => {
  router.push('/shoppingCart')
}
</script>

<style scoped>
.login-header {
  border-bottom: 1px solid #ccc;
  height: 40px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.login-header .login-left {
  position: fixed;
  left: 8px;
}

.login-header .login-right {
  position: fixed;
  right: 13px;
}

.login-header span {
  margin: 0 20px;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 1px;
  text-align: center;
}

/* .login-header div span {
  text-align: center;
} */

.ml-8 {
  margin-left: 8px;
}

.margin {
  margin-left: 13px;
}
</style>
